import React from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import { Action } from 'components';
import { http } from 'libs';
import store from './store';
import CategoryForm from './Form';

@observer
class CategoryTable extends React.Component {
  componentDidMount() {
    store.fetchRecords()
  }

  
  handleDelete = (text) => {
    Modal.confirm({
      title: '删除确认',
      content: `确定要删除【${text['name']}】?`,
      onOk: () => {
        return http.delete(`/api/course/category/${text.id}/`)
          .then(() => {
            message.success('删除成功');
            store.fetchRecords()
          })
      }
    })
  };

  render() {
    return (
      <React.Fragment>
        <Table
          rowKey="id"
          loading={store.isFetching}
          dataSource={store.records}
          pagination={false}>
          <Table.Column title="学校" dataIndex="school"/>
          <Table.Column title="课程大类" dataIndex="name"/>
          <Table.Column title="排序" dataIndex="sort_id"/>
          <Table.Column title="操作" render={info => (
            <Action>
              <Action.Button 
                auth="course.category.edit" 
                onClick={() => store.showForm(info)}>
                编辑
              </Action.Button>
              <Action.Button 
                auth="course.category.del" 
                danger 
                onClick={() => this.handleDelete(info)}>
                删除
              </Action.Button>
            </Action>
          )}/>
        </Table>
        {store.formVisible && <CategoryForm/>}
      </React.Fragment>
    )
  }
}

export default CategoryTable 